<template>
  <div>
    <el-card>
      <el-form
        :inline="true"
        :model="searchForm"
        class="demo-form-inline"
        label-position="right"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item label="用户名">
              <el-input
                v-model="searchForm.username"
                placeholder="请输入用户名"
                clearable
                :style="selectWidth"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="权限机构">
              <el-input
                v-model="searchForm.position"
                placeholder="请输入权限机构"
                clearable
                :style="selectWidth"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="角色">
              <el-input
                v-model="searchForm.roleIds"
                placeholder="请输入角色"
                clearable
                :style="selectWidth"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="有效状态">
              <el-select
                v-model="searchForm.status"
                placeholder="请选择有效状态"
                clearable
                :style="selectWidth"
              >
                <el-option label="无效" value="0" />
                <el-option label="有效" value="1" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="text-align: center">
          <el-col :span="24">
            <el-form-item>
              <el-button @click="onreset">重置</el-button>
              <el-button type="primary" @click="onSearch"
                ><el-icon><Search /></el-icon>搜索</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <!-- 表格部分 -->
    <el-card style="margin-top: 10px">
      <div style="margin-bottom: 5px">
        <el-button type="primary" plain size="small" @click="onAdd"
          ><el-icon><DocumentAdd /></el-icon>添加</el-button
        >
        <el-button
          type="danger"
          plain
          size="small"
          :disabled="multiple"
          @click="onDelete"
          ><el-icon><DeleteFilled /></el-icon>删除</el-button
        >
        <!-- <el-button type="warning" plain size="small" @click="onExport"
          ><el-icon><Download /></el-icon>数据导出</el-button
        > -->
      </div>
      <el-table
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="50" />
        <el-table-column prop="username" label="用户名" />
        <el-table-column prop="departName" label="权限机构" />
        <el-table-column prop="roleName" label="角色" />
        <el-table-column prop="is_admin" label="状态">
          <template #default="{ row }">
            <el-tag
              v-if="row.disabled"
              :disable-transitions="true"
              type="danger"
              size="small"
              >无效</el-tag
            >
            <el-tag
              v-else
              :disable-transitions="true"
              type="success"
              size="small"
              >有效</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="操作选项">
          <template #default="{ row }">
            <el-button
              link
              plain
              type="primary"
              size="small"
              @click="onPreview(row)"
              ><el-icon><View /></el-icon>查看</el-button
            >
            <el-button
              link
              plain
              type="primary"
              size="small"
              @click="onEdit(row)"
              ><el-icon><Edit /></el-icon>修改</el-button
            >
            <el-button
              link
              plain
              type="primary"
              size="small"
              @click="onRevocation(row)"
              ><el-icon><Delete /></el-icon>删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>
    <el-dialog
      v-model="addDialogVisible"
      :title="title"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @close="onClose"
      width="55%"
    >
      <el-form
        ref="addRuleFormRef"
        style="min-width: 700px"
        :model="addRuleForm"
        :rules="addRules"
        label-width="120"
        class="demo-ruleForm"
        status-icon
      >
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="用户名"
              prop="username"
              name="username"
              required
            >
              <el-input
                v-model="addRuleForm.username"
                placeholder="请输入用户名"
                clearable
                :disabled="showDialog === 0"
                autocomplete="new-password"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="电子邮箱"
              prop="email"
              name="position"
              required
            >
              <el-input
                v-model="addRuleForm.email"
                placeholder="请输入电子邮箱"
                clearable
                :disabled="showDialog === 0"
                autocomplete="new-password"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="showDialog !== 0">
          <el-col :span="12">
            <el-form-item
              label="密码"
              prop="password"
              name="password"
              :required="title === '添加'"
            >
              <el-input
                v-model="addRuleForm.password"
                placeholder="请输入密码"
                clearable
                autocomplete="new-password"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="确认密码"
              prop="confirm_password"
              name="confirm_password"
              :required="title === '添加'"
            >
              <el-input
                v-model="addRuleForm.confirm_password"
                type="text"
                placeholder="请确认密码"
                clearable
                autocomplete="new-password"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="禁用" prop="disabled" name="disabled" required>
              <el-radio-group
                v-model="addRuleForm.disabled"
                :disabled="showDialog === 0"
              >
                <el-radio value="0" size="large">否</el-radio>
                <el-radio value="1" size="large">是</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="showDialog !== 2">
            <el-form-item label="登录次数" prop="loginCount" name="loginCount">
              <el-input v-model="addRuleForm.loginCount" clearable disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="真实姓名"
              prop="realName"
              name="realName"
              required
              :disabled="showDialog === 0"
            >
              <el-input
                v-model="addRuleForm.realName"
                placeholder="请输入真实姓名"
                clearable
                :disabled="showDialog === 0"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="sex" name="sex">
              <el-radio-group
                v-model="addRuleForm.sex"
                :disabled="showDialog === 0"
              >
                <el-radio value="0" size="small">男</el-radio>
                <el-radio value="1" size="small">女</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="角色" prop="roleIds" name="roleIds">
              <el-checkbox-group
                v-model="addRuleForm.roleIds"
                :disabled="showDialog === 0"
              >
                <el-checkbox
                  v-for="item in roleIdList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-checkbox-group>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="等级" prop="rank" name="rank" required>
              <el-input
                v-model="addRuleForm.rank"
                placeholder="数字越大等级越高"
                clearable
                type="number"
                :disabled="showDialog === 0"
              />
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item
              label="归属机构"
              prop="departName"
              name="departName"
              required
            >
              <el-select
                v-model="addRuleForm.departName"
                filterable
                placeholder="请选择归属机构"
                style="width: 240px"
                :disabled="showDialog === 0"
              >
                <el-option
                  v-for="item in homeOrganizationList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row>
          <el-col :span="12">
            <el-form-item
              label="授权管理员"
              prop="selfAdmin"
              name="selfAdmin"
              required
            >
              <el-radio-group
                v-model="addRuleForm.selfAdmin"
                :disabled="showDialog === 0"
              >
                <el-radio label="否" value="0" />
                <el-radio label="是" value="1" />
              </el-radio-group>
              <span style="font-size: 11px">（是：只能管理自己的数据）</span>
            </el-form-item>
          </el-col>
        </el-row> -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="审核级别" prop="step" name="step" required>
              <el-col>
                <el-select
                  v-model="addRuleForm.step"
                  style="width: 100px; margin-left: 5px"
                  :disabled="showDialog === 0"
                >
                  <el-option label="编辑岗" value="0" />
                  <el-option label="一级审核" value="1" />
                  <el-option label="二级审核" value="2" />
                  <el-option label="三级审核" value="3" />
                </el-select>
              </el-col>
            </el-form-item>
            <!-- <el-form-item label="权限机构" prop="departIds" name="departIds">
              <el-select
                v-model="addRuleForm.departIds"
                multiple
                placeholder="请选择权限机构"
                style="width: 240px"
              >
                <el-option
                  v-for="item in homeOrganizationList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item> -->
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <!-- <el-form-item
              label="版位机构"
              prop="adDepartId"
              name="adDepartId"
              required
            >
              <el-select
                v-model="addRuleForm.adDepartId"
                :disabled="showDialog === 0"
              >
                <el-option label="中国银保信" value="9000"></el-option>
              </el-select>
            </el-form-item> -->
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20">
            <!-- <el-form-item label="站点" prop="siteIds" name="siteIds">
              <el-checkbox-group v-model="addRuleForm.siteIds">
                <el-row>
                  <el-col>
                    <el-checkbox
                      label="中国保信"
                      value="0"
                      style="width: 100px"
                      :disabled="showDialog === 0"
                    />
                  </el-col>
                  <el-col>
                    <el-checkbox
                      label="所有栏目权限"
                      value="1"
                      style="width: 120px"
                      :disabled="showDialog === 0"
                    />
                  </el-col>
                </el-row>
              </el-checkbox-group>
            </el-form-item> -->
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer" v-if="showDialog !== 0">
          <el-button @click="onReset(addRuleFormRef)">重 置</el-button>
          <el-button type="primary" @click="onSubmit(addRuleFormRef)"
            >提 交</el-button
          >
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script  setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  getUserList,
  getupdate,
  insertUser,
  deleteUser,
  updatetUser,
  getRoles
} from '@/api/user/user.js'
const updateId = ref('')
const ids = ref([])
const multiple = ref(true)
const addDialogVisible = ref(false)
const addRuleFormRef = ref()
const total = ref(0)
const title = ref('添加')
const showDialog = ref()
const selectWidth = ref('width:200px')
// const authorityOrganizationList = ref([])
// 归属机构数组
const homeOrganizationList = ref([])
// 角色列表
const roleIdList = ref([])
// 添加表单的内容
const addRuleForm = ref({
  username: '',
  email: '',
  password: '',
  confirm_password: '',
  realName: '',
  sex: '0',
  // allowedIp: null,
  rank: '',
  roleIds: [],
  departName: '',
  selfAdmin: 1,
  // departIds: [],
  // siteIds: [],
  step: [],
  disabled: '0',
  // groupId: '1',
  loginCount: ''
})
// 搜索框
const searchForm = ref({
  position: '',
  status: null,
  username: '',
  roleIds: ''
})
const tableData = ref([])

// 校验规则
const addRules = reactive({
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  email: [
    {
      required: true,
      type: 'email',
      message: '请输入正确的电子邮箱',
      trigger: ['blur', 'change']
    }
  ],
  realName: [{ required: true, message: '请输入真实姓名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  confirm_password: [
    { required: true, message: '请输入确认密码', trigger: 'blur' }
  ],
  allowedIp: [
    { required: true, message: '请输入 IP', trigger: ['blur', 'change'] }
  ],
  disabled: [{ required: true, message: '请选择禁用选项', trigger: 'blur' }],

  // ip: [
  //         {
  //             pattern: /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,
  //             message: '请输入正确的 IP 地址',
  //             trigger: ['blur', 'change']
  //         }
  // ],
  departName: [{ required: true, message: '请选择归属机构', trigger: 'blur' }],
  step: [{ required: true, message: '请选择审核级别', trigger: 'blur' }],
  adDepartId: [{ required: true, message: '请选择版权机构', trigger: 'blur' }],
  selfAdmin: [{ required: true, message: '请选择版权机构', trigger: 'blur' }],
  rank: [{ required: true, message: '请输入等级', trigger: 'blur' }],
  type: [{ required: true, message: '请选择类型', trigger: 'blur' }],
  'content.pictureUrl': [
    { required: true, message: '请输入图片地址', trigger: 'blur' }
  ]
})
const queryParams = ref({
  pageNo: 1,
  pageSize: 10
})
const getList = () => {
  const result = {
    queryUsername: searchForm.value.username,
    departName: searchForm.value.position,
    roleName: searchForm.value.roleIds,
    queryDisabled:
      searchForm.value.status === '1'
        ? false
        : searchForm.value.status === '0'
        ? true
        : null
  }
  getUserList({ ...result, ...queryParams.value }).then((res) => {
    tableData.value = res.data.pagination.list
    total.value = res.data.pagination.total
  })
}
// 搜索
const onSearch = () => {
  getList()
}
// 搜索重置
const onreset = () => {
  searchForm.value = {
    position: '',
    status: null,
    username: '',
    roleIds: ''
  }
}
// 增加
const onAdd = () => {
  showDialog.value = 2
  title.value = '添加'
  addDialogVisible.value = true
  getRoles().then((res) => {
    homeOrganizationList.value = res.data.departmentList
    roleIdList.value = res.data.roleList
  })
  addRuleForm.value = {
    username: '',
    email: '',
    password: '',
    confirm_password: '',
    realName: '',
    sex: '2',
    allowedIp: null,
    // ip: '',
    rank: '',
    roleIds: [],
    departName: '',
    selfAdmin: 1,
    // departIds: [],
    // adDepartId: '',
    // siteIds: [],
    step: [],
    disabled: '0',
    // groupId: '1',
    loginCount: ''
  }
}
// 多项删除
const onDelete = () => {
  deleteUser({ ids: ids.value }).then((res) => {
    ElMessage({
      type: 'success',
      message: '删除成功'
    })
    getList()
  })
}
// 导出
// const onExport = () => {
//   console.log('数据导出')
// }
// 查看
const onPreview = (val) => {
  addRuleForm.value.name = val.name
  showDialog.value = 0
  title.value = '查看'
  addDialogVisible.value = true
  const params = {
    id: val.id
  }
  getupdate(params).then((res) => {
    homeOrganizationList.value = res.data.departmentList
    roleIdList.value = res.data.roleList
    addRuleForm.value = {
      username: res.data.userRequest.username,
      email: res.data.userRequest.email,
      password: res.data.userRequest.password,
      realName: res.data.userRequest.realName,
      sex: res.data.userRequest.gender ? '0' : '1',
      rank: res.data.userRequest.rank,
      // allowedIp: res.data.userRequest.allowedIp,
      roleIds: res.data.userRequest.roleIds,
      departName: res.data.userRequest.departName,
      selfAdmin: res.data.userRequest.selfAdmin ? '1' : '0',
      // departIds: res.data.userRequest.departIds,
      // adDepartId: res.data.userRequest.adDepartId.toString(),
      // siteIds: res.data.userRequest.siteIds,
      step: res.data.userRequest.step.toString(),
      disabled: res.data.userRequest.disabled ? '1' : '0',
      // auditLevel: res.data.siteIds,
      // forbidden: '',
      loginCount: res.data.cmsAdmin.loginCount
    }
  })
}
const onClose = () => {
  addRuleForm.value = {
    username: '',
    email: '',
    password: '',
    confirm_password: '',
    realName: '',
    sex: '2',
    // allowedIp: null,
    // ip: '',
    rank: '',
    roleIds: [],
    departName: '',
    selfAdmin: 1,
    // departIds: [],
    // adDepartId: '',
    // siteIds: [],
    step: '',
    forbidden: '',
    // groupId: '1',
    loginCount: ''
  }
}

// 修改
const onEdit = (row) => {
  showDialog.value = 1
  addRuleForm.value.name = row.name
  title.value = '修改'
  addDialogVisible.value = true
  updateId.value = row.id
  const params = {
    id: row.id
  }
  getupdate(params).then((res) => {
    homeOrganizationList.value = res.data.departmentList
    roleIdList.value = res.data.roleList
    addRuleForm.value = {
      username: res.data.userRequest.username,
      email: res.data.userRequest.email,
      password: res.data.userRequest.password,
      realName: res.data.userRequest.realName,
      sex: res.data.userRequest.gender ? '0' : '1',
      rank: res.data.userRequest.rank,
      // allowedIp: res.data.userRequest.allowedIp,
      roleIds: res.data.userRequest.roleIds,
      departName: res.data.userRequest.departId,
      selfAdmin: res.data.userRequest.selfAdmin ? '1' : '0',
      // departIds: res.data.userRequest.departIds,
      // adDepartId: res.data.userRequest.adDepartId.toString(),
      // siteIds: res.data.userRequest.siteIds,
      step: res.data.userRequest.step.toString(),
      disabled: res.data.userRequest.disabled ? '1' : '0',
      // auditLevel: res.data.siteIds,
      // forbidden: '',
      loginCount: res.data.cmsAdmin.loginCount
    }
  })
}

// 删除
const onRevocation = (row) => {
  ElMessageBox.confirm('您确定要删除这条数据吗？', '系统提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      const ids = []
      ids.push(row.id)
      deleteUser({ ids: ids }).then((res) => {
        ElMessage({
          type: 'success',
          message: '删除成功'
        })
        getList()
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除'
      })
    })
}
// const isIP = (str) => {
//   const ipRegex =
//     /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/
//   const starRegex = /^\*$/
//   return ipRegex.test(str) || starRegex.test(str)
// }
// 添加ip
// const addIP = () => {
//   if (isIP(addRuleForm.value.ip)) {
//     console.log(addRuleForm.value.allowedIp)
//     if (addRuleForm.value.allowedIp === null) {
//       addRuleForm.value.allowedIp = addRuleForm.value.ip
//     } else {
//       const result = addRuleForm.value.allowedIp.split('#')
//       result.push(addRuleForm.value.ip)
//       addRuleForm.value.allowedIp = result.join('#')
//     }

//     addRuleForm.value.ip = ''
//   } else {
//     ElMessage({
//       type: 'error',
//       message: '请输入正确的IP或者是*'
//     })
//   }
// }
// // 清空ip
// const clearIP = () => {
//   addRuleForm.value.allowedIp = []
//   addRuleForm.value.ip = ''
// }
// 提交
const onSubmit = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      let params = {}
      if (title.value === '添加') {
        params = {
          username: addRuleForm.value.username,
          email: addRuleForm.value.email,
          password: addRuleForm.value.password,
          realName: addRuleForm.value.realName,
          selfAdmin: false,
          // rank: addRuleForm.value.rank,
          // allowedIp: '',
          roleIds: addRuleForm.value.roleIds,
          // adDepartId: addRuleForm.value.adDepartId,
          departId: addRuleForm.value.departName,
          // departIds: addRuleForm.value.departIds,
          // siteIds: addRuleForm.value.siteIds,
          step: addRuleForm.value.step,
          gender: addRuleForm.value.sex === '1',
          disabled: addRuleForm.value.disabled === '1'
        }
        insertUser(params).then((res) => {
          ElMessage({
            type: 'success',
            message: res.message
          })
          getList()
          addDialogVisible.value = false
        })
      } else if (title.value === '修改') {
        params = {
          id: updateId.value,
          username: addRuleForm.value.username,
          email: addRuleForm.value.email,
          password:
            addRuleForm.value.password !== undefined
              ? addRuleForm.value.password
              : '',
          realName: addRuleForm.value.realName,
          selfAdmin: false,
          // rank: addRuleForm.value.rank,
          // allowedIp: addRuleForm.value.allowedIp,
          // groupId: addRuleForm.value.groupId,
          roleIds: addRuleForm.value.roleIds,
          // adDepartId: addRuleForm.value.adDepartId,
          departId: addRuleForm.value.departName,
          // departIds:
          //   addRuleForm.value.departIds !== undefined
          //     ? addRuleForm.value.departIds
          //     : [],
          // siteIds:
          //   addRuleForm.value.siteIds !== undefined
          //     ? addRuleForm.value.siteIds
          //     : [],
          step:
            addRuleForm.value.step !== undefined ? addRuleForm.value.step : '',
          disabled: addRuleForm.value.disabled === '1',
          gender: addRuleForm.value.sex === '1'
        }
        updatetUser(params)
          .then((res) => {
            if (res.success) {
              ElMessage({
                type: 'success',
                message: res.message
              })
              getList()
              addDialogVisible.value = false
            } else {
              ElMessage({
                type: 'danger',
                message: res.message
              })
            }
          })
          .catch((err) => {
            console.log(err)
          })
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}
// 重置
const onReset = (formEl) => {
  if (title.value === '添加') {
    addRuleForm.value = {
      username: '',
      email: '',
      password: '',
      confirm_password: '',
      realName: '',
      sex: '2',
      // allowedIp: null,
      // ip: '',
      rank: '',
      roleIds: [],
      departName: '',
      selfAdmin: 1,
      // departIds: [],
      // adDepartId: '',
      // siteIds: [],
      step: '',
      forbidden: '',
      // groupId: '1',
      loginCount: ''
    }
  } else if (title.value === '修改') {
    getupdate({ id: updateId.value }).then((res) => {
      addRuleForm.value = {
        username: res.data.cmsAdmin.username,
        email: res.data.cmsAdmin.email,
        password: res.data.cmsAdmin.password,
        realName: res.data.cmsAdmin.realName,
        sex: res.data.cmsAdmin.sex,
        rank: res.data.cmsAdmin.rank,
        // allowedIp: res.data.allowedIp,
        roleIds: res.data.cmsAdmin.roleIds,
        departName: res.data.cmsAdmin.departName,
        selfAdmin: res.data.cmsAdmin.selfAdmin ? '1' : '0',
        // departIds: res.data.cmsAdmin.departIds,
        // adDepartId: res.data.cmsAdmin.adDepartId,
        // siteIds: res.data.cmsAdmin.siteIds,
        step: res.data.cmsAdmin.step,
        disabled: addRuleForm.value.disabled ? '1' : '0',
        // auditLevel: res.data.siteIds,
        // forbidden: '',
        loginCount: res.data.cmsAdmin.loginCount
      }
    })
  }
  formEl.resetFields()
}
const handleSelectionChange = (selection) => {
  ids.value = selection.map((item) => item.id)
  multiple.value = !selection.length
}
getList()
</script>

<style lang="scss" scoped>
::v-deep {
  .el-table {
    .el-table__header-wrapper {
      th {
        word-break: break-word;
        background-color: #f8f8f9 !important;
        color: #515a6e;
        height: 40px !important;
        font-size: 13px;
      }
    }
  }
}
::v-deep {
  .el-form {
    .el-form-item {
      .el-form-item__label {
        font-weight: bold !important;
      }
    }
  }
}

::v-deep {
  .el-form {
    .el-form-item .second_label {
      .el-form-item__label {
        font-weight: normal !important;
        margin-top: 10px;
      }
    }
  }
}
::v-deep {
  .second_label {
    .el-form-item__error {
      position: static !important;
    }
  }
}
</style>
